<template>
	<view class="backdrop">
		<view class="zhuti">
			<view class="tesecanwu">
			<image class="fanhui" :src="imageUrl + '/tesewuchan/tesewuchanfanhui2.png'" mode="" @click="handleClicks"></image>
			<text class="biaoti">特色物产</text>
		</view>
		<view class="navigationBar">
			<p class="headline">物华天宝</p>
			<br>
			<view class="subtitle">
				<view class="teaDrinks">茶饮</view>
				<view class="snacks">小吃</view>
				<view class="fruits">水果</view>
				<view class="dishes">菜肴</view>
				<view class="tiaozhuan"></view>
			</view>
		</view>
		<view class="displayArea">
			<image class="berryTea" :src="imageUrl + '/tesewuchan/tesewuchanmeicha.png.png'" mode="" @click="handleClick"></image>
		</view>
		<view class="smallDisplayArea">
			<image class="centenaryTea" :src="imageUrl + '/tesewuchan/tesewuchanbaisuicha.png'" mode=""></image>

			<image class="tributeGreenTea" :src="imageUrl + '/tesewuchan/tesewuchanlcha.png'" mode=""></image>
		</view>
		<view class="ViewAll">查看全部 ></view>
		<view class="ancientTown">
			<p class="geographical">古村镇地理标志物产</p><br />
			<p class="specialty">特产映风土</p>
			<view style="margin-left: -30rpx;">
				<image class="ditu" :src="imageUrl + '/tesewuchan/tesewuchanditu.png'" @click="tiaozhuantitu"></image>
			</view>
			<view class="BerryTeaButton">
				<p class="wenzi1">莓茶</p>
			</view>
			<view class="blackGoat">
				<p class="wenzi2">黑山羊</p>
			</view>
			<view class="ViewAll2">查看全部 ></view>
		</view>
		<view class="ancientTown">
			<p class="geographical">民俗生活物产</p><br />
			<p class="specialty">品味古村镇日常风情</p>
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item>
						<image class="swiper-item uni-bg-red" :src="imageUrl + '/tesewuchan/tesewuchanxishu.png'" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image class="swiper-item uni-bg-green" :src="imageUrl + '/tesewuchan/tesewuchanxishu.png'" mode=""></image>
						<image :src="imageUrl + '/tesewuchan/tesewuchanxishu.png'" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image class="swiper-item uni-bg-blue" :src="imageUrl + '/tesewuchan/tesewuchanxishu.png'" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="ClickAtTheBottom">
			<image class="YongshunMayicha" :src="imageUrl + '/tesewuchan/tesewuchanmeichaanniu.png'" mode=""></image>
			<image class="YongshunBlackGoat" :src="imageUrl + '/tesewuchan/tesewuchanheishanyanganniu.png'" mode=""></image>
			<p class="ViewAll3">查看全部 ></p>
		</view>
		<view class="ancientTown">
			<p class="story">人.故事</p>
			<p class="products">里的物产</p>
			<p class="jiaobiao1">┌</p>
			<p class="jiaobiao2">┘</p>
			<br /><br />
			<p class="small">物载千秋事</p>
			<image class="eternity" :src="imageUrl + '/tesewuchan/tesewuchanyuhua.png'" mode=""></image>
			<image class="headerLabel" :src="imageUrl + '/tesewuchan/tesewuchanfengjing.png'" mode=""></image>
			<p class="Travel">《徐霞客游记》里的地理物产</p>
			<p class="life">毛泽东生活里的古村镇物产</p>
			<view class="ViewAll4">查看全部 ></view>
		</view>
		<view class="windVane">
			<p class="geographical">岁月风物记</p><br />
			<p class="specialty">从古村镇岁时节律到当代人的时候风向标</p>

		</view>
		</view>
			<School></School>
	</view>
</template>

<script>
	import School from './School.vue'
	export default {
		data() {
			return {
				secondaryParam4: '',
				page6PreviousParam: '',
				imageUrl: this.$imageUrl,
				background: ['color1', 'color2', 'color3'],
				// indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: [
					'https://xnlv.lizxx.com/image/xnlv/static/tesewuchan/tesewuchanyiyue.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tesewuchan/tesewuchanyiyue.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tesewuchan/tesewuchanyiyue.png',
				],
				
			}
		},
		 onLoad(options) {
		    // 获取跳转传递过来的参数
		    this.page6PreviousParam = options.fromPage;
		    const page6PreviousParam = options.fromPage;
		    if (page6PreviousParam) {
		      this.secondaryParam4 = page6PreviousParam;
		      uni.setStorageSync('page6StoredParam', page6PreviousParam);
		    } else {
		      this.secondaryParam4 = uni.getStorageSync('page6StoredParam');
		    }
		    console.log('获取到的参数或本地存储的值：', this.secondaryParam4);
		  },
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			handleClick() {
				wx.redirectTo({
					url: '/pagesNew/pages-special-local/pages-special-products/Yongshun-May-tea',
				});
			},
			 handleClicks() {
			      console.log('触发了');
			      console.log('page6PreviousParam 值为：', this.page6PreviousParam);
			      console.log('secondaryParam4 值为：', this.secondaryParam4);
			      if (this.page6PreviousParam) {
			        console.log('特定跳转，page6PreviousParam 值为：', this.page6PreviousParam);
			        wx.redirectTo({
			          url: `/${this.page6PreviousParam}`
			        });
			      } else if (this.secondaryParam4) {
			        // 如果 page6PreviousParam 为空，使用 secondaryParam4 进行跳转
			        console.log('上一次跳转，secondaryParam4 值为：', this.secondaryParam4);
			        wx.redirectTo({
			          url: `/${this.secondaryParam4}`
			        });
			      } else {
			        console.log('没有上一个页面传递的参数，也没有本地存储的值可用。');
					wx.redirectTo({
							url: '/pagesNew/pages/home/home',
					});
			      }
			    },
			tiaozhuantitu(){
				wx.redirectTo({
					url: '/pagesNew/pages-special-local/pages-special-products/tswcditu',
				})
			},
			

		},
		components: {
			School
		}
		
	}
</script>

<style>
	
	
	.zhuti {
	    width: 678rpx;
	    margin: 0 auto 0;
	    /* position: fixed; */
	}
	.biaoti {
	    margin: 0 auto 0;
	    width: 100vw;
	    margin-top: 120rpx;
	    /* margin-left: -40rpx; */
	}
	.fanhui {
	    width: 38rpx;
	    height: 38rpx;
	    position: absolute;
	    left: 20rpx;
	    margin-top: 120rpx;
	    /* position: fixed; */
	    /* top: 110rpx; */
	}
	.tiaozhuan {
	    background-color: #78837c;
	    height: 4rpx;
	    width: 60rpx;
	    margin-left: 120rpx;
	    margin-top: 8rpx;
	}
	.z-swiper-item {
	    height: 1400rpx;
	}
	.z-swiper {
	    width: 100%;
	    height: 800rpx;
	    border: 4rpx solid blue;
	}
	.image-zswiper {
	    position: absolute;
	    z-index: 3;
	    margin-top: 100%;
	    height: 1000rpx!important;
	    width: 498rpx;
	    border: 4rpx solid red;
	}
	.windVane {
	    /* height: 1000rpx; */
	    margin-top: 60rpx;
	    /* border: 4rpx solid black; */
	    /* margin: 0 auto 0; */
	}
	.January-1 {
	    width: 498rpx;
	    height: 712rpx;
	}
	.ViewAll4 {
	    color: #78837c;
	    position: relative;
	    left: -110rpx;
	    top: -54rpx;
	    display: inline-block;
	}
	.Travel {
	    color: #78837c;
	    position: relative;
	    left: 70rpx;
	    top: -126rpx;
	    display: inline-block;
	}
	.life {
	    color: #78837c;
	    position: relative;
	    left: 246rpx;
	    top: -110rpx;
	    display: inline-block;
	}
	.headerLabel {
	    width: 174rpx;
	    height: 174rpx;
	    /* margin-left: 40rpx; */
	    display: inline-block;
	}
	.small {
	    color: #78837c;
	    text-align: center;
	    font-size: 24rpx;
	    font-weight: 500;
	    margin-top: 10rpx;
	    margin-bottom: 30rpx;
	}
	.eternity {
	    width: 680rpx;
	    height: 306rpx;
	    /* margin-left: 40rpx; */
	    margin-top: 16rpx;
	}
	.jiaobiao1 {
	    color: #78837c;
	    display: inline-block;
	    font-size: 46rpx;
	    font-weight: 500;
	    position: relative;
	    top: -30rpx;
	    left: -400rpx;
	}
	.jiaobiao2 {
	    color: #78837c;
	    display: inline-block;
	    font-size: 46rpx;
	    font-weight: 500;
	    position: relative;
	    top: 30rpx;
	    left: -260rpx;
	}
	.products {
	    color: #78837c;
	    display: inline-block;
	    font-size: 46rpx;
	    font-weight: 500;
	    margin-left: 40rpx;
	}
	.story {
	    color: #78837c;
	    display: inline-block;
	    font-size: 46rpx;
	    font-weight: 500;
	    margin-left: 156rpx;
	}
	.ClickAtTheBottom {
	    margin-top: 20rpx;
	}
	.ViewAll3 {
	    position: absolute;
	    color: #78837c;
	    font-size: 28rpx;
	    display: inline-block;
	    margin-left: 60rpx;
	    margin-top: 16rpx;
	}
	.YongshunBlackGoat {
	    width: 206rpx;
	    height: 62rpx;
	    display: inline-block;
	    margin-left: 16rpx;
	}
	.YongshunMayicha {
	    width: 206rpx;
	    height: 62rpx;
	    display: inline-block;
	    /* margin-left: 68rpx; */
	}
	.uni-margin-wrap {
	    width: 1380rpx;
	    width: 100%;
	    /* margin-left: 68rpx; */
	    margin-top: 10rpx;
	    margin: 0 auto 0;
	}
	.swiper {
	    height: 386rpx;
		width: 680rpx;
	    margin-top: 10rpx;
	}
	.swiper-item {
	    display: block;
	    height: 386rpx;
	    line-height: 600rpx;
	    text-align: center;
		width: 680rpx;
	}
	.swiper-list {
	    margin-top: 80rpx;
	    margin-bottom: 0;
	}
	.uni-common-mt {
	    margin-top: 120rpx;
	    position: relative;
	}
	.info {
	    position: absolute;
	    right: 40rpx;
	}
	.uni-padding-wrap {
	    width: 1100rpx;
	    padding: 0 200rpx;
	}
	.prev {
	    left: 20rpx;
	}
	.next {
	    right: 20rpx;
	}
	.ViewAll2 {
	    color: #78837c;
	    text-align: center;
	    font-size: 28rpx;
	    display: inline-block;
	    margin-left: 46rpx;
	}
	.wenzi1 {
	    display: inline-block;
	    margin-top: 16rpx;
	    margin-left: 66rpx;
	    color: #666666;
	}
	.wenzi2 {
	    display: inline-block;
	    margin-top: 16rpx;
	    margin-left: 48rpx;
	    color: #666666;
	}
	.BerryTeaButton {
	    width: 196rpx;
	    height: 76rpx;
	    background-color: white;
	    margin-left: 54rpx;
	    display: inline-block;
	    border-radius: 16rpx;
	}
	.blackGoat {
	    width: 196rpx;
	    height: 76rpx;
	    background-color: white;
	    margin-left: 16rpx;
	    display: inline-block;
	    border-radius: 16rpx;
	}
	.ditu {
	    width: 722rpx;
	    height: 308rpx;
	    /* margin-left: 16rpx; */
	    margin-top: 30rpx;
	}
	.ancientTown {
	    margin-top: 60rpx;
	}
	.geographical {
	    color: #78837c;
	    text-align: center;
	    font-size: 46rpx;
	    font-weight: 500;
	}
	.specialty {
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 24rpx;
	    color: #666666;
	    line-height: 28rpx;
	    text-align: center;
	    font-style: normal;
	    text-transform: none;
	    margin-top: 16rpx;
	    margin-bottom: 40rpx;
	}
	.ViewAll {
	    color: #78837c;
	    text-align: center;
	    font-size: 28rpx;
	}
	.displayArea {
	    margin-top: 10rpx;
	    width: 100vw;
	    /* margin-left: -14rpx; */
	    margin-top: 30rpx;
	}
	.smallDisplayArea {
	    margin-top: 14rpx;
	    /* margin-left: -14rpx; */
	}
	.berryTea {
	    width: 666rpx;
	    height: 334rpx;
	    display: block;
	    /* margin-left: 54rpx; */
	}
	.centenaryTea {
	    width: 400rpx;
	    height: 242rpx;
	    display: inline-block;
	    /* margin-left: 54rpx; */
	}
	.tributeGreenTea {
	    width: 242rpx;
	    height: 242rpx;
	    display: inline-block;
	    margin-left: 26rpx;
	}
	.backdrop {
	    background-color: #e4ebe9;
	    height: 100vh;
	    width: 100vw;
	    position: fixed;
	    top: 0;
	    left: 0;
	    /* overflow: auto; */
	    overflow-y: auto;
	    overflow-x: hidden;
	}
	.teaDrinks {
	    height: 36rpx;
	    width: 72rpx;
	    display: inline-block;
	    margin-right: 40rpx;
	    margin-top: 40rpx;
	}
	.snacks {
	    height: 36rpx;
	    width: 72rpx;
	    display: inline-block;
	    margin-right: 40rpx;
	}
	.fruits {
	    height: 36rpx;
	    width: 72rpx;
	    display: inline-block;
	    margin-right: 40rpx;
	}
	.dishes {
	    height: 36rpx;
	    width: 72rpx;
	    display: inline-block;
	    margin-right: 40rpx;
	}
	.tesecanwu {
	    display: flex;
	    /* margin-top: -200rpx; */
		top: 0;
	    color: #42594c;
	    text-align: center;
	    font-weight: 560;
	    position: fixed;
	    width: 100vw;
	    height: 200rpx;
	    margin-left: -36rpx;
	    background-color: #e4ebe9;
	    z-index: 99;
	}
	.navigationBar {
	    color: #78837c;
	    margin-top: 200rpx;
	}
	.headline {
	    margin: 0 auto 0;
	    text-align: center;
	    font-size: 40rpx;
	}
	.subtitle {
	    text-align: center;
	    font-size: 32rpx;
	    margin-top: 20rpx;
	}
</style>